<template>
  <!-- 弹框 -->
  <el-dialog
    align="center"
    :before-close="CloseWindow"
    title="新增学生"
    :visible="this.$store.state.dialogTableVisible"
    width="40%"
    v-dialogDrag>
    <!-- @submit.native.prevent 阻止表单默认提交-->
  <el-form ref="addStuFrom" label-width="20%" size="Large" status-icon @submit.native.prevent>
  <el-form-item
    label="姓名"
    prop="name"
    style="width: 50%;"
    :rules="[
      { required: true, message: '姓名不能为空',trigger: 'blur'},
    ]">
    <el-input v-model="form.name"></el-input>
  </el-form-item>

  <el-form-item
    label="年龄"
    style="width: 50%;"
    prop="age"
    :rules="[
      { required: true, message: '年龄不能为空'},
      ]">
    <el-input v-model="form.age" ></el-input>
  </el-form-item>

  <el-form-item
    label="性别"
    style="width: 50%;"
    prop="sex">
    <el-radio v-model="form.sex" label="1">男</el-radio>
    <el-radio v-model="form.sex" label="0">女</el-radio>
  </el-form-item>

  <el-form-item style="width: 50%;">
    <!-- native-type="submit" 设置该按钮未表单默认提交按钮，从而实现回车提交-->
    <el-button type="primary" @click="onSubmit('addStuFrom')" native-type="submit">提交</el-button>
    <el-button @click="Clear('addStuFrom')">重置</el-button> <!-- //重置表单，必须加入表单ref值-->
  </el-form-item>
</el-form>


  </el-dialog>
</template>

<script>
  import {addStuden} from '@/api/userApi' //导入接口工具
  export default {
  //  props:["dialogTableVisible"],
    components: {
    },

    data() {
      return {
        StuAndCouState:false,
        form: {
          sex: '1',
          age:'',
          name: '',
          type: [],
        }
      }
    },
    methods: {

      //重置表单
      Clear(){
        //子组件调用父组件方法
        this.$refs['addStuFrom'].resetFields();//清空表单
      },

      //关闭窗口
      CloseWindow(done) {
        done();//关闭对话
        console.log("关闭了")
        this.$store.state.dialogTableVisible=!this.$store.state.dialogTableVisible
        this.$refs['addStuFrom'].resetFields();//清空表单
      },


      //提交表单
      onSubmit(){
        console.log("此时的名字：",this.form.name)
        console.log("此时的年龄：",this.form.age)
        console.log("此时的性别：",this.form.sex)
        addStuden(this.form.name,this.form.age,this.form.sex).then(response => {
          this.$store.commit('RefreshStu')//调用全局组件中的方法，刷新学生列表
          this.$store.state.dialogTableVisible=!this.$store.state.dialogTableVisible//关闭对话框
          this.$refs['addStuFrom'].resetFields();//清空表单
        })

      },

    }
  }
</script>
